 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="JQ多功能焦点图" />
<meta name="description" content="基于JQ，实现多功能焦点图，好用的焦点图，兼容IE6" />
<title>魔蝎焦点图v1.2</title>
<link rel="stylesheet" type="text/css" href="mystatics/statics/css/style.css">
<script type="text/javascript" src="mystatics/js/jquery.min.js"></script>
<script type="text/javascript" src="mystatics/statics/js/script.js"></script>
</head>
<body>
<div class="auto">
<div class="auto-bor">
<div class="auto-float">
<div class="top-logo">魔蝎 —— 轮播图插件 - IE6 　<a>http://www.http-js.com/</a><span>已有 <b id="download">...</b> 人下载</span></div>
<div style="clear:both; height:20px;"></div>
<textarea class="top-text" readonly="readonly">
mx_slide()	//ID选择器（jQuery）
.find()	  //选择块 —— 默认 '.mx-content a'
.mode()   //选择模式 'fade'||'left'||'top' —— 默认 'fade'
.time()   //切换时间 —— 默认5000
.speed()  //切换速度 —— 默认 500
.auto()   //是否自动播放 true||false —— 默认 true
.change() //定义序列标签 —— 默认 'span'
.event()  //定义序列选择事件 —— 默认 'mouseover'
.num()    //是否显示序列数字 true||false —— 默认 true
.delay()  //序列选中延迟 —— 默认 100
.key()    //按钮延迟 —— 默认 300
.start(fn) //轮播开始 —— 'function'

注：所有参数设置必须在 .start() 轮播开始之前

示例：
1.执行一个渐变轮播
mx_slide('#mx-fade').start();	//'#mx-fade' 选择ID

2.执行一个横向滑动轮播
mx_slide('#mx-left').mode('left').start();	//'#mx-left' 选择ID

3.执行一个纵向滑动轮播
mx_slide('#mx-top').mode('top').start();	//'#mx-top' 选择ID

4.执行一个横向手动切换图，并且设置按钮延缓时间为0.5s
mx_slide('#mx-left-1').mode('left').auto(false).key(500).start();

5.执行一个渐变轮播，并且带有标题
mx_slide('#mx-fade-1').mode('top').start(function(i){	// 给 .start() 方法传递函数，执行扩展, 参数 i 为需要切换的图片数值
	$('#mx-fade-1 .mx-title a').eq(i).fadeIn().siblings().stop().fadeOut();		//标题切换方法
});	
</textarea>
<div style="clear:both; height:20px;"></div>
<div class="top-index">
	<div class="top-case bg1">
		<div class="top-title">
			<div></div>
			<h2>常用轮播图</h2>
		</div>
		<ul>
			<li style="margin-left:0;">
				<h3>渐变轮播图</h3>
				<a href="module/used/demo1/" target="_blank" title="查看演示">查看演示</a>
				<p>渐变轮播图，无按钮，无标题</p>
			</li>
			<li>
				<h3>横向滑动轮播图</h3>
				<a href="module/used/demo2/" target="_blank" title="查看演示">查看演示</a>
				<p>横向滑动轮播图，无按钮，无标题</p>
			</li>
			<li>
				<h3>纵向滑动轮播图</h3>
				<a href="module/used/demo3/" target="_blank" title="查看演示">查看演示</a>
				<p>纵向滑动轮播图，无按钮，无标题</p>
			</li>
			<li>
				<h3>带按钮渐变轮播图</h3>
				<a href="module/used/demo4/" target="_blank" title="查看演示">查看演示</a>
				<p>渐变轮播图，有按钮，无标题</p>
			</li>
			<li>
				<h3>带按钮横向滑动轮播图</h3>
				<a href="module/used/demo5/" target="_blank" title="查看演示">查看演示</a>
				<p>横向滑动轮播图，有按钮，无标题</p>
			</li>
			
			<li style="margin-left:0;">
				<h3>带按钮纵向滑动轮播图</h3>
				<a href="module/used/demo6/" target="_blank" title="查看演示">查看演示</a>
				<p>纵向滑动轮播图，有按钮，无标题</p>
			</li>
			<li>
				<h3>带标题渐变轮播图</h3>
				<a href="module/used/demo7/" target="_blank" title="查看演示">查看演示</a>
				<p>渐变轮播图，有按钮，有标题</p>
			</li>
			<li>
				<h3>带标题横向滑动轮播图</h3>
				<a href="module/used/demo8/" target="_blank" title="查看演示">查看演示</a>
				<p>横向滑动轮播图，有按钮，有标题</p>
			</li>
			<li>
				<h3>带标题纵向滑动轮播图</h3>
				<a href="module/used/demo9/" target="_blank" title="查看演示">查看演示</a>
				<p>纵向滑动轮播图，有按钮，有标题</p>
			</li>
			<li>
				<h3>无序列号轮播图</h3>
				<a href="module/used/demo10/" target="_blank" title="查看演示">查看演示</a>
				<p>渐变轮播图，有按钮，无标题，无序列号</p>
			</li>
		</ul>
	</div>

	<div class="top-case bg2">
		<div class="top-title">
			<div></div>
			<h2>全屏轮播</h2>
		</div>
		<ul>
			<li style="margin-left:0;">
				<h3>全屏渐变轮播</h3>
				<a href="module/screen/demo1/" target="_blank" title="查看演示">查看演示</a>
				<p>普通全屏渐变轮播图，无序列号</p>
			</li>
			<li>
				<h3>全屏渐变扩展轮播</h3>
				<a href="module/screen/demo2/" target="_blank" title="查看演示">查看演示</a>
				<p>全屏渐变轮播图，使用扩展，完成轮播动画</p>
			</li>
			<li>
				<h3>全屏渐变自定义序列轮播</h3>
				<a href="module/screen/demo3/" target="_blank" title="查看演示">查看演示</a>
				<p>全屏渐变轮播图，自定义序列轮播</p>
			</li>
		</ul>
	</div>
	
	<div class="top-case bg3">
		<div class="top-title">
			<div></div>
			<h2>文章/版面轮播</h2>
		</div>
		<ul>
			<li style="margin-left:0;">
				<h3>渐变轮播图</h3>
				<a href="module/content/demo1/" target="_blank" title="查看演示">查看演示</a>
				<p>常见小窗口轮播图，渐变轮播，有标题，序列号</p>
			</li>
			<li>
				<h3>横向滑动轮播图一</h3>
				<a href="module/content/demo2/" target="_blank" title="查看演示">查看演示</a>
				<p>常见小窗口轮播图，横向滑动轮播，有标题，序列号</p>
			</li>
			<li>
				<h3>横向滑动轮播图二</h3>
				<a href="module/content/demo3/" target="_blank" title="查看演示">查看演示</a>
				<p>常见小窗案例展示轮播，横向滑动，有按钮、标题、序列</p>
			</li>
			<li>
				<h3>纵向滑动轮播图</h3>
				<a href="module/content/demo4/" target="_blank" title="查看演示">查看演示</a>
				<p>图片案例展示轮播，有标题、自定义序列，无按钮</p>
			</li>
		</ul>
	</div>
	
	<div class="top-case bg4">
		<div class="top-title">
			<div></div>
			<h2>图片查看器</h2>
		</div>
		<ul>
			<li style="margin-left:0;">
				<h3>渐变模式图片查看器</h3>
				<a href="module/picture/demo1/" target="_blank" title="查看演示">查看演示</a>
				<p>渐变模式，无自动切换，类似淘宝购买页面的商品图片查看</p>
			</li>
			<li>
				<h3>滑动模式图片查看器</h3>
				<a href="module/picture/demo2/" target="_blank" title="查看演示">查看演示</a>
				<p>渐变模式，可自动切换，类似淘宝购买页面的商品图片查看</p>
			</li>
			
		</ul>
	</div>
	
</div>
</div>
</div>
</div>
</body>
</html>